<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    append-to-body
    width="400px"
    :title="isAccountLogin ? '账号登录' : '邮箱登录'"
    class="login-dialog"
    destroy-on-close
  >
    <div class="dialog-content">
      <!-- 登录表单 -->
      <div class="form-wrapper">
        <login-form v-if="isAccountLogin" :is-dialog="true" @login="handleLogin">
          <template #footer>
            <div class="form-footer">
              <el-button type="primary" link @click="handleForgotPassword">忘记密码？</el-button>
            </div>
          </template>
        </login-form>
        <login-email v-else :is-dialog="true" @login="handleLogin">
          <template #footer>
            <div class="form-footer">
              <el-button type="primary" link @click="handleRegister">注册账号</el-button>
              <el-button type="primary" link @click="handleForgotPassword">忘记密码？</el-button>
            </div>
          </template>
        </login-email>
      </div>

      <!-- 第三方登录 -->
      <div class="third-party-container">
        <el-divider>其他登录方式</el-divider>
        <div class="third-party-icons">
          <el-tooltip content="QQ登录" placement="top">
            <el-button class="qq-button" @click="handleQQLogin">
              <img src="@/assets/image/login/qq.png" alt="QQ登录" class="icon" />
            </el-button>
          </el-tooltip>
          <el-tooltip :content="isAccountLogin ? '邮箱登录' : '账号登录'" placement="top">
            <el-button
              :class="isAccountLogin ? 'email-button' : 'account-button'"
              @click="toggleLoginMethod"
            >
              <img
                :src="
                  isAccountLogin
                    ? '/src/assets/image/login/email.png'
                    : '/src/assets/image/login/account.png'
                "
                :alt="isAccountLogin ? '邮箱登录' : '账号登录'"
                class="icon"
              />
            </el-button>
          </el-tooltip>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/store/modules/user';
import { useCommonStore } from '@/store/modules/common';
import { usePermissionStore } from '@/store/modules/permission';
import LoginForm from './LoginForm.vue';
import LoginEmail from './LoginEmail.vue';

interface Props {
  modelValue: boolean;
  redirect?: boolean;
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void;
  (e: 'login-success'): void;
  (e: 'login-cancel'): void;
}

const props = withDefaults(defineProps<Props>(), {
  redirect: true
});

const emit = defineEmits<Emits>();

const userStore = useUserStore();
const commonStore = useCommonStore();
const permissionStore = usePermissionStore();

const isAccountLogin = ref(true);

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});

const toggleLoginMethod = () => {
  isAccountLogin.value = !isAccountLogin.value;
};

const handleLogin = async (formData: any) => {
  try {
    // 重新获取用户权限和数据
    await commonStore.getDictionary();
    await permissionStore.generateRoutes(userStore.roles);

    emit('login-success');
    visible.value = false;

    if (props.redirect) {
      // 如果需要重定向，由token管理器处理
    }
  } catch (error) {
    console.error('获取用户数据失败:', error);
    ElMessage.error('登录成功但获取用户数据失败');
  }
};

const handleQQLogin = async () => {
  try {
    // TODO: 实现 QQ 登录逻辑
    console.log('QQ登录');
    ElMessage.info('QQ登录功能开发中...');
  } catch (error) {
    ElMessage.error('QQ登录失败');
  }
};

const handleForgotPassword = () => {
  visible.value = false;
  emit('login-cancel');
  // 可以在这里打开忘记密码弹窗或跳转到忘记密码页面
  ElMessage.info('请前往登录页面进行密码重置');
};

const handleRegister = () => {
  visible.value = false;
  emit('login-cancel');
  // 可以在这里打开注册弹窗或跳转到注册页面
  ElMessage.info('请前往登录页面进行账号注册');
};
</script>

<style lang="scss" scoped>
.login-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 30px;
  }
}

.dialog-content {
  position: relative;
  min-height: 300px;
}

.form-wrapper {
  width: 100%;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 10px;
}

.third-party-container {
  margin-top: 20px;

  .third-party-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;

    .el-button {
      width: 40px;
      height: 40px;
      padding: 8px;
      transition: all 0.3s ease;
      background-color: white;

      .icon {
        width: 100%;
        height: 100%;
        transition: filter 0.3s ease;
      }

      &.qq-button {
        border-color: #12b7f5;
        &:hover {
          background-color: #12b7f5;
          .icon {
            filter: brightness(0) invert(1);
          }
        }
      }

      &.email-button {
        border-color: #4caf50;
        &:hover {
          background-color: #4caf50;
          .icon {
            filter: brightness(0) invert(1);
          }
        }
      }

      &.account-button {
        border-color: #409eff;
        &:hover {
          background-color: #409eff;
          .icon {
            filter: brightness(0) invert(1);
          }
        }
      }
    }
  }
}
</style>
